<template>
  <div
    class="reach-table"
    id="reachTable"
  >
    <div class="model-head">
      <span class="title">达成度统计表</span>
      <span class="set-btn">
        <i class="iconfont icon-shezhi"></i>
        <router-link
          :to="{
                        name: 'ReachDegree',
                        query: { id }
                    }"
          tag="span"
          class="set-text"
        >
          达成度设置
        </router-link>
      </span>
      <span
        class="up-btn"
        @click="openUpload(2)"
      >
        <span class="iconfont icon-shangchuan-"></span>
        <span>批量导入成绩</span>
      </span>
      <span class="down-btn">
        <span class="iconfont icon-tubiaozhizuo-"></span>
        <span @click="downLoadData">整体数据</span>
      </span>
    </div>

    <div class="model-body">
      <template
        v-for="( obj, index ) in tableList"
        :key="index"
      >
        <div
          v-if="obj.checkId"
          class="table-item single-result"
        >
          <div class="table-item-head">
            <img
              class="icon1"
              src="@/assets/img/statistics/table-icon.png"
              alt=""
            >
            <span class="item-name">{{ obj.checkName }}</span>
            <span
              class="up-btn"
              @click="openUpload(3, obj)"
            >
              <span class="iconfont icon-shangchuan-"></span>
              <span>导入成绩</span>
            </span>
            <span class="fn-btn">
              <span class="iconfont icon-gongshi"></span>
              <el-tooltip
                class="item"
                effect="dark"
                placement="bottom-start"
              >
                <template #content>
                  <p class="item-tips">
                    课程目标考核分项成绩=导入成绩平均值 * (100/满分) * 考核分项权重值 * 考核项权重值 * 课程目标权重值 <br />
                    考核分项成绩 = 课程目标考核分项成绩加和<br />
                    考核项成绩 = 考核分项成绩加和<br />
                  </p>
                  <p class="item-tips">
                    课程目标考核分项满分= 100 * 考核分项权重值 * 考核项权重值 * 课程目标权重值<br />
                    考核分项满分 = 课程目标考核分项满分加和<br />
                    考核项满分 = 考核分项满分加和<br />
                  </p>
                  <p class="item-tips">
                    考核分项期望值 = 考核分项满分 * 阈值<br />
                    考核项期望值 = 考核项满分 * 阈值<br />
                  </p>
                </template>
                <span>查看公式</span>
              </el-tooltip>
            </span>
            <span class="full-num">
              <span>满分：</span>
              <span class="num">{{ obj.fullMark }}分</span>
            </span>

            <span class="result">
              <span>成绩：</span>
              <span class="num">{{ obj.grade }}分</span>
            </span>
          </div>
          <el-table
            :data="obj.content"
            border
            style="width: 100%"
            :highlight-current-row="true"
            header-cell-class-name="table-head"
            row-class-name="table-body"
          >
            <el-table-column
              v-for="(items, index) in column"
              :fixed="index == 0 ? true : false"
              :label="items.label"
              :prop="items.prop"
              :key="index"
              :show-overflow-tooltip="true"
              width="140"
            >
              <template #default="scope">
                <div>
                  <p>
                    <span class="item-title">{{ scope.row.name  }}</span>
                    <img
                      v-if="scope.row.isRefSys"
                      class="client-icon"
                      src="@/assets/img/statistics/client.png"
                      alt=""
                    >
                  </p>
                  <p
                    v-if="scope.$index != (obj.content.length - 1)"
                    :class="[scope.row.isSetWeight ? 'setWeight-R' : 'setWeight-G']"
                    class="setWeight"
                    @click="setWeight(scope.row.subId)"
                  >
                    设置目标权重
                  </p>
                </div>
                <el-table-column
                  v-for="(item, i) in items.children"
                  :label="item.label"
                  :key="i"
                >
                  <template #default="scope2">
                    <!-- {{ index - 1 }} -->
                    <!-- {{ i }} -->
                    <span>{{ scope2.row.num[index-1][i]}}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div
          v-else
          class="table-item sum-result"
        >
          <div class="table-item-head">
            <img
              class="icon1"
              src="@/assets/img/statistics/table-icon1.png"
              alt=""
            >
            <span class="item-name">{{ obj.checkName }}</span>
            <span class="full-num">
              <span>满分：</span>
              <span class="num">{{ obj.fullMark }}分</span>
            </span>

            <span class="result">
              <span>成绩：</span>
              <span class="num">{{ obj.grade }}分</span>
            </span>
          </div>
          <el-table
            :data="obj.content"
            :span-method="arraySpanMethod"
            border
            style="width: 100%"
            :highlight-current-row="true"
            header-cell-class-name="table-head"
            row-class-name="table-body"
          >
            <el-table-column
              v-for="(items, index) in column"
              :fixed="index == 0 ? true : false"
              :label="items.label"
              :prop="items.prop"
              :key="index"
              width="140"
            >
              <template v-if="items.children">
                <el-table-column
                  v-for="(item, i) in items.children"
                  :label="item.label"
                  :key="i"
                >
                  <template #default="scope">
                    <span v-if="scope.$index == 0">
                      {{ scope.row.num[index-1][i] }}
                    </span>
                    <span v-if="scope.$index == 1 && index <= column.length - 2">
                      {{ scope.row.num[index-1]?.[i]}}
                    </span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <div
        v-if="!tableList.length"
        v-loading="loading"
        element-loading-text="拼命加载中"
        class="no-info"
      >
        <img
          v-if="!loading"
          src='@/assets/img/empty.png'
        />
        <p v-if="!loading">暂无数据</p>
      </div>
    </div>

    <importDialog
      ref="importDialog"
      @refresh="init"
    />

    <setWeightDialog
      ref="setWeightDialog"
      @refresh="init"
    />
  </div>
</template>

<script>
import importDialog from "../importUpload.vue";
import eventBus from "@/utils/eventBus";
import setWeightDialog from "../courseTarget/component/setWeightDialog.vue";
import {
  reachTableList,
  downLoadAllScoreData,
  getCourseTargetWeight,
} from "@/api/courseReach";
import { downLoadFile } from "@/utils/common";
// import { format } from "echarts/types/src/util/time.js";
export default {
  components: {
    importDialog,
    setWeightDialog,
  },
  props: ["id", "name"],
  filters: {
    format(obj, index, i) {
      const itemArr = obj.num[index - 1];
      if (itemArr) {
        return itemArr[i];
      }
    },
  },

  data() {
    return {
      loading: false,
      that: this,
      len: null,
      tableList: [],
      column: [
        {
          label: "分项目",
          prop: "name",
          width: "130",
        },
      ],
    };
  },

  watch: {
    id() {
      this.init();
    },
  },

  created() {
    this.init();
    eventBus.on("refreshTable", this.handleInitHub);
  },
  beforeUnmount() {
    eventBus.off("refresh", this.handleRefresh);
  },

  methods: {
    handleInitHub() {
      this.init();
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == this.len) {
        if (columnIndex !== 0) {
          return [1, 2];
        }
      }
    },

    init() {
      console.log("init");
      this.tableList = [];
      this.tableList.length = 0;
      this.column.length = 1;
      this.loading = true;
      reachTableList({
        concludeId: this.id,
      })
        .then((res) => {
          console.log("init2");
          eventBus.emit("initHub");
          console.log("init3");
          this.loading = false;
          const { data } = res;

          if (data) {
            const { header } = data[0];

            const len = header.courseHeaderVO.length;

            const W = len > 4 ? 194 : Math.floor(970 / len);

            this.column.push({
              label: "合计分数",
              width: `${W}`,
              children: [
                {
                  label: "期望/满分",
                  width: `${W / 2}`,
                },
                {
                  label: "成绩",
                  width: `${W / 2}`,
                },
              ],
            });

            for (var i = 1; i < len; i++) {
              this.column.push({
                label: `课程目标${i > 9 ? i : "0" + i}`,
                width: `${W}`,
                children: [
                  {
                    label: "满分",
                    width: `${W / 2}`,
                  },
                  {
                    label: "成绩",
                    width: `${W / 2}`,
                  },
                ],
              });
            }

            data.forEach((item) => {
              const { checkName, checkId, content, fullMark, grade } = item;
              // let data = null;
              if (!checkId) {
                this.len = content.length - 1;
                // content[1].rowContent = ["达成度", "0.24", "0", "2", "0", "1", '3']
                // data =  this.dataList(content);
              }

              const data = this.dataList(content);

              this.tableList.push({
                checkId,
                checkName,
                content: data,
                fullMark,
                grade,
              });
            });
            console.log(this.tableList);
          }
        })
        .catch((err) => {
          eventBus.emit("initHub");
          this.loading = false;
        });
    },

    dataList(data) {
      const contentData = [];
      const length = data.length;
      data.forEach((item, index) => {
        const { isRefSys, rowContent, subId, isSetWeight } = item;
        const obj = {
          name: "",
          subId,
          isRefSys,
          isSetWeight,
          num: [],
        };
        obj.name = rowContent.shift();
        const len = rowContent.length;
        const n = 2;
        let lineNum = len % 2 === 0 ? len / 2 : Math.floor(len / 2 + 1);
        for (let i = 0; i < lineNum; i++) {
          let temp = rowContent.slice(i * n, i * n + n);
          obj.num.push(temp);
        }
        contentData.push(obj);
      });

      return contentData;
    },

    openUpload(type, obj) {
      this.$refs.importDialog.init(type, this.id, obj);
    },

    downLoadData() {
      downLoadAllScoreData({
        concludeId: this.id,
      }).then(async (res) => {
        const mimeType = "application/vnd.ms-excel";
        if (res.type == mimeType) {
          downLoadFile(new Blob([res]), `${this.name}-整体数据.xls`, mimeType);
        } else {
          const { message } = JSON.parse(await new Response(res).text());
          this.$message.error(message);
        }
      });
    },

    setWeight(id) {
      getCourseTargetWeight({
        subId: id,
      })
        .then((res) => {
          const { courseParams } = res.data;

          if (courseParams.length) {
            this.$refs.setWeightDialog.init(res.data);
          } else {
            this.$message.warning("您暂未关联课程目标！");
          }
        })
        .catch(() => {});
    },
  },
  // beforeDestroy() {
  //   eventBus.off("initHub");
  // },
};
</script>

<style lang="scss">
.reach-table {
  .item-title {
    max-width: 100px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    text-overflow: ellipsis;
  }

  .setWeight {
    font-size: 12px;
    font-weight: 400;
    margin: 10px auto 0;
    line-height: 17px;
    cursor: pointer;
  }

  .setWeight-R {
    color: #f56c6c;
    width: 80px;
    height: 17px;
    background: #fef0f0;
    border: 1px solid #fde2e2;
    border-radius: 2px;
    &:hover {
      background: #f56c6c;
      border-color: #f56c6c;
      color: #fff;
    }
  }

  .setWeight-G {
    color: #74c55c;
    width: 80px;
    height: 17px;
    background: #f0f9eb;
    border: 1px solid #e1f3d8;
    border-radius: 2px;
    text-align: center;
    &:hover {
      background: #67c23a;
      border-color: #67c23a;
      color: #fff;
    }
  }

  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background-color: rgba(0, 0, 0, 0.03);
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(220, 221, 221, 1);
    }
  }

  .el-table__fixed {
    height: 100% !important;
  }

  .client-icon {
    width: 13px;
    height: 13px;
    margin-left: 6px;
    margin-top: 2px;
  }
  .el-icon-setting {
    font-size: 16px;
    vertical-align: middle;
  }

  .single-result,
  .sum-result {
    .table-head {
      font-size: 16px;
      font-weight: bold;
      border-right: 4px solid #fff;
      border-bottom: 4px solid #fff;
    }

    thead .is-leaf {
      border-bottom: 4px solid #fff;
    }

    .el-table--border,
    .el-table--group {
      border: 0;
    }
    .el-table--border::after,
    .el-table--group::after {
      width: 0;
    }

    .el-table::before,
    .el-table__fixed::before {
      height: 0;
    }

    .table-body {
      td {
        border-right: 4px solid #fff;
        font-weight: 400;
        border-bottom: 4px solid #fff;
      }
    }

    .table-body:last-child td {
      background: #eff4ff;
      border: 0;
    }
  }

  .single-result {
    .table-head {
      background: #a6b4ec !important;
      color: #f8f8f8;
    }

    .el-table__body tr.hover-row > td,
    .el-table__body tr.current-row > td {
      background: #f6f9ff;
    }

    .el-table__body tr:last-child.current-row > td,
    .el-table__body tr:last-child.hover-row > td {
      background: #eff4ff;
    }

    .table-body {
      td {
        background: #f6f9ff;
        color: #474747;
      }
    }

    .table-body:last-child td {
      color: #5a72cd;
    }
  }

  .sum-result {
    .table-head {
      background: #89beeb !important;
      color: #ffffff;
    }

    .el-table__body tr.hover-row > td,
    .el-table__body tr.current-row > td {
      background: #eff4ff;
    }

    .el-table__body tr:last-child.current-row > td,
    .el-table__body tr:last-child.hover-row > td {
      background: #eff4ff;
    }

    .table-body {
      td {
        background: #eff4ff;
        color: #1277eb;
        font-weight: bold;
      }
    }

    .table-body:last-child td {
      color: #1277eb;
    }
  }
}

.item-tips {
  line-height: 20px;
}

.item-tips ~ .item-tips {
  margin-top: 20px;
}
</style>

<style lang="scss" scoped>
.reach-table {
  margin-top: 36px;
  .model-head {
    display: flex;
    height: 18px;
    align-items: center;
    .title {
      position: relative;
      color: #385899;
      font-size: 18px;
      font-weight: 400;
      padding-left: 22px;
      &::before {
        content: "";
        top: 0;
        left: 0;
        position: absolute;
        width: 3px;
        height: 18px;
        background: #385899;
      }
    }

    .set-text {
      display: inline-block;
    }

    .set-btn {
      margin-left: auto;
      color: #385899;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      a {
        color: #385899;
        text-decoration: none;
      }
      &:hover {
        color: #1277eb;
      }

      .iconfont {
        position: relative;
        top: 1px;
      }
    }

    .up-btn,
    .down-btn {
      margin-left: 35px;
      cursor: pointer;
      &:hover {
        span {
          color: #1277eb;
        }
      }

      .iconfont {
        font-size: 16px;
      }

      span {
        display: inline-block;
        color: #385899;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }

  .model-body {
    margin-top: 20px;
    .single-result {
      padding: 25px 45px 30px;
      background: #fff;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      .table-item-head {
        display: flex;
        height: 20px;
        align-items: center;
        margin-bottom: 23px;
        .icon1 {
          width: 22px;
          img {
            width: 100%;
          }
        }

        .item-name {
          margin-left: 10px;
          color: #5a72cd;
          font-size: 20px;
          font-weight: bold;
          margin-right: 20px;
        }

        .fn-btn {
          margin-left: 28px;
          .iconfont {
            font-size: 18px;
          }
        }

        .up-btn,
        .fn-btn {
          position: relative;
          top: 4px;
        }

        .up-btn {
          .iconfont {
            font-size: 16px;
          }
        }

        .up-btn,
        .fn-btn {
          cursor: pointer;
          &:hover {
            span {
              color: #1277eb;
              cursor: pointer;
            }
          }

          span {
            display: inline-block;
            vertical-align: inherit;
            color: #385899;
            font-size: 14px;
            font-weight: 400;
          }
        }

        .full-num {
          margin-left: auto;
        }

        .result {
          margin-left: 64px;
        }

        .full-num {
          color: #474747;
          font-size: 16px;
          font-weight: 400;
          position: relative;
          padding-left: 14px;
          &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 12px;
            background: #1277eb;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .num {
            color: #1277eb;
            font-size: 18px;
            font-weight: bold;
          }
          span {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      .result {
        color: #474747;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        padding-left: 14px;
        &::before {
          position: absolute;
          content: "";
          width: 4px;
          height: 12px;
          background: #5a72cd;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .num {
          color: #5a72cd;
          font-size: 18px;
          font-weight: bold;
        }
        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .sum-result {
      padding: 25px 45px 30px;
      background: #fff;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      .table-item-head {
        display: flex;
        height: 20px;
        align-items: center;
        margin-bottom: 23px;
        .icon1 {
          width: 22px;
          img {
            width: 100%;
          }
        }

        .item-name {
          margin-left: 10px;
          color: #1277eb;
          font-size: 20px;
          font-weight: bold;
          margin-right: 20px;
        }

        .fn-btn {
          margin-left: 15px;
          cursor: pointer;
          &:hover {
            span {
              color: #1277eb;
            }
          }

          .iconfont {
            font-size: 18px;
          }

          span {
            display: inline-block;
            vertical-align: bottom;
            color: #385899;
            font-size: 14px;
            font-weight: 400;
          }
        }

        .full-num {
          margin-left: auto;
        }

        .result {
          margin-left: 64px;
        }

        .full-num {
          color: #474747;
          font-size: 16px;
          font-weight: 400;
          position: relative;
          padding-left: 14px;
          &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 12px;
            background: #1277eb;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .num {
            color: #1277eb;
            font-size: 18px;
            font-weight: bold;
          }
          span {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      .result {
        color: #474747;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        padding-left: 14px;
        &::before {
          position: absolute;
          content: "";
          width: 4px;
          height: 12px;
          background: #5a72cd;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .num {
          color: #5a72cd;
          font-size: 18px;
          font-weight: bold;
        }
        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .table-item ~ .table-item {
      margin-top: 10px;
    }
  }
}
</style>
